<template>
  <ComDialog v-model="dialogVisible" title="新增">

    <ElementEasyForm ref="comFromRef" class="mt20" :formJson="formJson">
    </ElementEasyForm>
    <template #footer>
      <div>
        <el-button size="large" @click="handleClose">取消</el-button>
        <el-button
          size="large"
          :loading="subLoading"
          type="primary"
          @click="submitData"
          >保存</el-button
        >
      </div>
    </template>
  </ComDialog>
</template>

<script setup lang="tsx">
import { ElMessage } from "element-plus";
import { ref, reactive, defineEmits, onMounted, watch, shallowRef } from "vue";
import { add ,Info,
updata

} from "../api";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["update:modelValue", "update"]);
const dialogVisible = shallowRef(false);
const subLoading = shallowRef(false);
const comFromRef = ref<any>();
const { t } = useI18n();

const submitData = async () => {
  try {
    const res = await comFromRef.value.validate();
    if (props.id) {
      updata(res).then((resItem: any) => {
        ElMessage.success(t("操作成功"));
        handleClose();
        emit("update");
      });
    } else {
      add(res).then((resItem: any) => {
        ElMessage.success(t("操作成功"));
        handleClose();
        emit("update");
      });
    }
  } catch (error) {
    console.log("error :>> ", error);
  }
};
const state = reactive({});
const formJson = ref<any>({
  "rowAttrs": {
    "gutter": 20,
    "justify": "start",
    "align": "middle"
  },
  "schema": [
    {
      "label": "模板名称",
      "type": "COMPONENT",
      "formItemAttrs": {},
      "formType": "all",
      "attrs": {
        "type": "text",
        "placeholder": "请输入"
      },
      rules: [{ required: true, message: "项目编号不能为空", trigger: 'change' }],
      "prop": "tplName",
      "events": [],
      "componentName": "ElInput",
      "hidden": {
        "matchPattern": "&&",
        "type": "select",
        "dataSelect": [],
        "value": false,
        "dataJs": "function hidden(config,data){\n      return false;\n    }"
      },
      "colAttrs": {
        "span": 12,
        "offset": 0,
        "push": 0,
        "pull": 0
      }
    },
 
  ],
  "model": {
    "tplName": "",
    
  },
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    "scroll-to-error": false,
    "disabled": false
  }
});
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
    id: {
    type: String,
    default: "",
  },
});
const getInfo = () =>{
    Info(props.id).then((response: ResponseConfig) => {
    formJson.value.model = response.data;


  });
}
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
    if(props.id&&val){
        getInfo();
        // getDeptTree();
    }else if(!props.id&&val){
      formJson.value.model = {
      };
    }
  },
  {
    immediate: true,
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
</script>

<style scoped lang="scss"></style>
